<template>
    <div class="box">
      <HeadVue></HeadVue>
      <div class="content">
       <H3>热门搜索</H3>
       <van-tag class="gray" color="gray" plain    
       v-for="item in searchGood" :key="item.keyword"
       @click="goGoodsSearch(item.keyword)"
       >
       {{item.keyword}}
       </van-tag>

     
      </div>
  
    </div>
  </template>
  
  <script>
import axios from "axios";
    
  import HeadVue from '@/components/brand/Head.vue';
  export default {
    name:"Search",
    components:{
      HeadVue
  },
  
  data() {
    return {
      searchGood:[]
    }
  },
  created() {
    axios({
        url: "api/pro/hotword",
      })
      .then((res) => {
          console.log('res.data',res.data.data);
          
        this.searchGood = res.data.data;
       
        })
        .catch((err) => {
          console.log("err", err);
        });
  }
  , methods:{
    goGoodsSearch(keyword) {
      this.$router.push(`/SearchResult?keyword=${keyword}`);
    },
    }
  }
  </script>
  
  <style scoped>
    .box{
      width: 100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  
  
    .content{
      flex:1;
      overflow: auto;
      margin: 0 1rem;
    }
    .content h3{
      margin-bottom: 0.5rem;
    }
    .gray{
      margin: 0.2rem;
    }
    
  
  
  </style>